<template>
    <div class="carousel">
      <div class="carousel-inner">
        <img
          v-for="(image, index) in images"
          :key="index"
          :src="image"
          :class="{ active: index === currentIndex }"
          class="carousel-item"
        />
      </div>
      <button class="carousel-control prev" @click="prev">&#10094;</button>
      <button class="carousel-control next" @click="next">&#10095;</button>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        images: [
          require('@/assets/image.png'), 
          require('@/assets/五口巴靓图/3.png'), 
          require('@/assets/五口巴靓图/7.jpg'), 
          require('@/assets/jiandingxinxin.jpg'), 
        ],
        currentIndex: 0,
        interval: null,
      };
    },
    methods: {
      next() {
        this.currentIndex = (this.currentIndex + 1) % this.images.length;
      },
      prev() {
        this.currentIndex =
          (this.currentIndex - 1 + this.images.length) % this.images.length;
      },
      startAutoPlay() {
        this.interval = setInterval(this.next, 3000);
      },
      stopAutoPlay() {
        clearInterval(this.interval);
      },
    },
    mounted() {
      this.startAutoPlay();
    },
    beforeDestroy() {
      this.stopAutoPlay();
    },
  };
  </script>
  
  <style scoped>
.carousel {
  position: relative;
  width: 100%; 
  height: 500px; 
  overflow: hidden;
}

.carousel-inner {
  display: flex;
  transition: transform 0.5s ease-in-out;
  height: 100%; 
}

.carousel-item {
  width: 100%; 
  height: 100%; 
  display: none;
  object-fit: cover; 
}

.carousel-item.active {
  display: block;
}

.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 10; 
}

.carousel-control.prev {
  left: 10px;
}

.carousel-control.next {
  right: 10px;
}
</style>